<!DOCTYPE html>
<html>
<head>
    <title>Mass-Spring System</title>
</head>
<body>

<canvas id="physicsCanvas" width="300" height="450"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = "20px Times New Roman";

    // --- Define coordinates and dimensions ---
    const centerX = 130;
    const supportY = 50;
    const supportWidth = 120;
    
    const pointPY = 90;
    
    const springTopY = 100;
    const springBottomY = 250;
    const springRadius = 10;
    const springCoils = 8;
    
    const massTopY = 260;
    const massWidth = 50;
    const massHeight = 40;
    const massBottomY = massTopY + massHeight;

    const dimLineX = 200;
    
    // --- Draw Support ---
    ctx.beginPath();
    ctx.moveTo(centerX - supportWidth / 2, supportY);
    ctx.lineTo(centerX + supportWidth / 2, supportY);
    ctx.stroke();

    // Draw hatches for the support
    const hatchLength = 15;
    const hatchAngle = Math.PI / 4;
    for (let i = 0; i < 7; i++) {
        const x = (centerX - supportWidth / 2) + i * (supportWidth / 6);
        ctx.moveTo(x, supportY);
        ctx.lineTo(x - hatchLength * Math.cos(hatchAngle), supportY - hatchLength * Math.sin(hatchAngle));
    }
    ctx.stroke();

    // --- Draw upper rod ---
    ctx.beginPath();
    ctx.moveTo(centerX, supportY);
    ctx.lineTo(centerX, springTopY);
    ctx.stroke();

    // --- Draw Point P ---
    ctx.beginPath();
    ctx.arc(centerX, pointPY, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = "bold 20px Times New Roman";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText("P", centerX - 20, pointPY);

    // --- Draw Spring ---
    ctx.beginPath();
    ctx.moveTo(centerX, springTopY);
    const numPoints = springCoils * 20; // More points for a smoother curve
    for (let i = 1; i <= numPoints; i++) {
        const t = i / numPoints;
        const currentY = springTopY + t * (springBottomY - springTopY);
        // Use -sin to start the coil to the left, like in the image
        const currentX = centerX - springRadius * Math.sin(t * springCoils * 2 * Math.PI);
        ctx.lineTo(currentX, currentY);
    }
    ctx.stroke();
    
    // --- Draw lower rod ---
    ctx.beginPath();
    ctx.moveTo(centerX, springBottomY);
    ctx.lineTo(centerX, massTopY);
    ctx.stroke();

    // --- Draw Mass Block ---
    ctx.beginPath();
    ctx.rect(centerX - massWidth / 2, massTopY, massWidth, massHeight);
    ctx.stroke();
    // Label 'm'
    ctx.font = "italic 20px Times New Roman";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText("m", centerX, massTopY + massHeight / 2);

    // --- Draw Dimension Line for 'x' ---
    ctx.beginPath();
    // Horizontal guide line from P
    ctx.moveTo(centerX, pointPY);
    ctx.lineTo(dimLineX, pointPY);
    
    // Horizontal guide line from mass top
    ctx.moveTo(centerX, massTopY);
    ctx.lineTo(dimLineX, massTopY);

    // Vertical line
    ctx.moveTo(dimLineX, pointPY);
    ctx.lineTo(dimLineX, massTopY);
    
    // Top T-bar
    ctx.moveTo(dimLineX - 5, pointPY);
    ctx.lineTo(dimLineX + 5, pointPY);
    
    // Bottom Arrow
    const arrowSize = 8;
    ctx.moveTo(dimLineX, massTopY);
    ctx.lineTo(dimLineX - arrowSize / 2, massTopY - arrowSize);
    ctx.moveTo(dimLineX, massTopY);
    ctx.lineTo(dimLineX + arrowSize / 2, massTopY - arrowSize);
    
    ctx.stroke();
    
    // Label 'x'
    ctx.font = "italic 20px Times New Roman";
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText("x", dimLineX + 10, (pointPY + massTopY) / 2);
    
    // --- Draw Caption ---
    ctx.font = "18px Times New Roman";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText("Fig. 1.64.", centerX, massBottomY + 40);

</script>

</body>
</html>